import './index.less';
import { defineComponent } from 'vue';
import { getFRC } from '@/api/home';
import '../../../style/index.less';
import {
  ElDialog,
  ElPagination,
  ElTable,
  ElTableColumn
} from 'element-plus';
export default defineComponent({
  name: 'ItemTable',
  props: ['type','data'],
  setup(props: any, { emit, slots, expose }) {
    const dialogVisible = ref(false);
    const title = ref("")
    const pageable = ref({
      page: 1,
      pageSize: 15,
      total: 0
    }) as AnyObject;
    const data = ref({}) as AnyObject;
    const column =computed(()=>{
      switch(props.type){
        case 0:
          title.value = "生产事故";
          return [{prop:"date",label:"日期"},{prop:"title",label:"标题"},{prop:"content",label:"详情"}];
        case 1:
          title.value = "我的福利";
          return [{prop:"name",label:"福利"},{prop:"content",label:"福利值"}];
          case 2:
          title.value = "我的荣誉";
          return [{prop:"name",label:"荣誉"},{prop:"content",label:"荣誉值"}];
          default:
            title.value = "我的处分";
            return [{prop:"name",label:"处分"}];
      }
    });
    const handleSizeChange = (pageSize: number) => {
      pageable.value.pageSize = pageSize;
      getKFCList();
    };
    const handleCurrentChange = (page: number) => {
      pageable.value.page = page;
      getKFCList();
    };

    const getKFCList = () => {
      getFRC({
        page: pageable.value.page,
        pageSize: pageable.value.pageSize,
        type:props.type
      }).then((res) => {
        data.value = res.data;
      });
    };
    watch(
      () => dialogVisible.value,
      (val: boolean) => {
        if (val) {
          data.value = props.data;
          pageable.value.total = data.value.total;
        }
      }
    );
    expose({ dialogVisible });
    return () => (
      <ElDialog
        lock-scroll
        draggable
        v-model={dialogVisible.value}
        title={title.value}
        style={{ maxWidth: '800px', with: 'auto' }}
      >
        <ElTable
          header-row-class-name="table_header"
          size="small"
          data={data.value?.list}
        >
          {column.value.map((_item:AnyObject)=><ElTableColumn prop={_item.prop} label={_item.label} />)}
          <ElTableColumn width="45px" label="详情" v-slots={{ default: ({ row }: AnyObject) =>row.url && <a class="co-7 hover-color" href={row.url} target='_blank'>详情</a> }} />
        </ElTable>
        <ElPagination
          v-model:current-page={pageable.value.page}
          v-model:page-size={pageable.value.pageSize}
          small
          page-sizes={[15, 30, 50, 100]}
          hide-on-single-page
          layout="total, sizes, prev, pager, next, jumper"
          total={pageable.value.total}
          onSize-change={handleSizeChange}
          onCurrent-change={handleCurrentChange}
        ></ElPagination>
      </ElDialog>
    );
  }
});
